<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    	<title>统战成员学习平台</title>
	    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
	    <link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
	</head>
	<body>
		<div id='app' style="display:none" v-show="true">
			<div class="contact_search" :class="{'active': searching}">
				<input id="searchInput" v-model="searchText">
				<span @click="search()" class="search_tap">
					<i class="icon_search_user"></i>搜索
				</span>
				<span @click="cancelSearch()" class="cancel_btn">取消</span>
			</div>
			<div class="catalogActive" v-if="touching">{{catalogActive}}</div>
			<div class="contact_catalog">
				<ul @touchstart.stop="touching = true" @touchend.stop="touching = false" @touchmove.stop="touchmove($event)">
					<li @click="selectCatelog(i)" v-for="i of catalog" :class="{'active': catalogActive===i, 'cata': true}">{{i}}</li>
				</ul>
			</div>
			<div class="contact_list">
				<ul v-for="item of searchData" :id="item.letter==='#'?'aa':item.letter.toUpperCase()">
					<template v-if="item.data.length > 0">
						<li>{{item.letter.toUpperCase()}}</li>
						<li v-for="(user, i) of item.data" tapmode="tap" @click="openWin('user_detail_win', {userId: user.usrId})"
							class="user" :class="{'ui_border_b': i<item.data.length-1}" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
							<img :src="imageBasePath + user.usrImg" onerror="this.src=''">
							{{user.usrName}}
						</li>
					</template>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/common.js"></script>
		<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
			window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
				window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(fn){setTimeout(fn(), 20)};
		    new Vue({
				el: '#app',
		     	data: {
					imageBasePath: imageBasePath,
					catalogActive: 'A',
					catalog: 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,#'.split(','),
					touching: false,
					width: 375,
					searching: false,
					searchText: '',
					userList: []
		     	},
				computed:{
					searchData: function() {
						var $this = this;
						if($this.searchText.length === 0) return $this.userList;
						var arr = [];
						$this.userList.forEach(function(item) {
							var user = item.data.filter(function(u) {
								return u.usrName.indexOf($this.searchText) > -1
							})
							if(user.length > 0) {
								item.data = user;
								arr.push(item);
							}
						});
						return arr;
					}
				},
				mounted: function() {
		        	var $this = this;
		        	apiready = function() {
						$this.width = api.frameWidth;
						$this.init();
						// onscroll set catalogActive
						$this.addScrollLister();
                	}
		    	},
		    	methods: {
					init: function() {
						var $this = this;
						post('/client/org/userList', {}, function(ret) {
							if(ret.isSuccess) {
								$this.userList = ret.data;
								parseTapmode();
							} else {
								msgUtil.toast({
								    msg: ret.message
								})
							}
						});
					},
					search: function() {
						var $this = this;
						if($this.searching) searchInput.focus();
						$this.searching = true;
						setTimeout(function(){searchInput.focus()}, 300)
					},
					cancelSearch: function() {
						var $this = this;
						$this.searching = false;
						$this.searchText = '';
					},
					touchmove: function(e) {
						var $this = this;
						e.preventDefault();
						var el = document.elementFromPoint($this.width - 20, e.touches[0].clientY);
						if(el && el.nodeName === 'LI' && el.classList.contains('cata')) {
							$this.catalogActive = el.innerText;
							$this.movePage();
						}
					},
					movePage: function() {
						var $this = this;
						var el = document.querySelector('#' + ($this.catalogActive==='#'?'aa':$this.catalogActive));
						if(el) document.body.scrollTop = document.documentElement.scrollTop = el.offsetTop - 52;
					},
					selectCatelog: function(i) {
						var $this = this;
						$this.catalogActive = i;
						$this.movePage();
					},
					addScrollLister: function() {
						var $this = this;
						window.onscroll = function(e) {
							var el = document.elementFromPoint($this.width/2, 52);
							if(el.nodeName === 'LI') $this.catalogActive = el.parentNode.id;
						}
					},
					fixScrollOnIOS: function() {
						var $this = this;
						var el = document.elementFromPoint($this.width/2, 10);
						if(el.nodeName === 'LI') $this.catalogActive = el.parentNode.id;
						window.requestAnimationFrame($this.fixScrollOnIOS)
					}
		    	}
		    });
		</script>
	</body>
</html>
